fadeicon(image, posx, posx2, size)
  width: size
  height: size
  position: relative;
  &:before
    content: ""
    position: absolute
    top: 0; left: 0; bottom: 0; right: 0
    width: size
    height: size
    background-image: url(../images/icons/image.png)
    background-position: posx 0px
    background-repeat: no-repeat
    opacity: 1
    -webkit-transition: opacity 0.5s
  &:after
    content: ""
    position: absolute
    top: 0; left: 0; bottom: 0; right: 0
    width: size
    height: size
    background-image: url(../images/icons/image.png)
    background-position: posx2 0px
    background-repeat: no-repeat
    opacity: 0
    -webkit-transition: opacity 0.5s
  &:hover:before
    opacity: 0;
  &:hover:after
    opacity: 1;




.left
    float: left

.right
    float right

    // Gives nicer scrollbars to an element
scrollable()
    overflow-x hidden
    // Overflow: overlay is an undocumented webkit feature. It places the scrollbar *on top* of the content instead of eating some 16px.
    // It's buggy, though (it paints the scrollbar *over* the content and composites badly, so it will crop the content anyway )
    overflow-y overlay
    // Inertial scrolling for touch devices (mostly useless here)
    -webkit-overflow-scrolling touch

    &::-webkit-scrollbar
        width 5px

    &::-webkit-scrollbar-track
        background-color $ScrollBarBg
        border-radius 2px

    &::-webkit-scrollbar-thumb
        background-color $ScrollBarThumb
        border-radius 2px

        &:hover
            background-color: $ScrollBarThumbHover

    &::-webkit-resizer,
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-button,
    &::-webkit-scrollbar-track-piece
        display none


.tooltip-arrow
  position absolute
  width 0
  height 0
  border-color transparent
  border-style solid

.tooltip
  &.top
    .tooltip-arrow
      bottom 0
      left 50%
      margin-left -5px
      border-width 5px 5px 0
      border-top-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.top-left
    .tooltip-arrow
      bottom 0
      left 5px
      border-width 5px 5px 0
      border-top-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.top-right
    .tooltip-arrow
      right 5px
      bottom 0
      border-width 5px 5px 0
      border-top-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.right
    .tooltip-arrow
      top 50%
      left 0
      margin-top -5px
      border-width 5px 5px 5px 0
      border-right-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.left
    .tooltip-arrow
      top 50%
      right 0
      margin-top -5px
      border-width 5px 0 5px 5px
      border-left-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.bottom
    .tooltip-arrow
      top 0
      left 50%
      margin-left -5px
      border-width 0 5px 5px
      border-bottom-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.bottom-left
    .tooltip-arrow
      top 0
      left 5px
      border-width 0 5px 5px
      border-bottom-color rgba(9, 13, 18, 0.75)
      transition all 0.5s
  &.bottom-right
    .tooltip-arrow
      top 0
      right 5px
      border-width 0 5px 5px
      border-bottom-color rgba(9, 13, 18, 0.75)
      transition all 0.5s

.tooltip-inner
    max-width 200px
    padding 3px 8px
    color #fff
    text-align center
    text-decoration none
    background-color rgba(9, 13, 18, 0.75)
    border-radius 4px